import type { SetupContext } from 'vue'
import type { ColorfulBadgePropsType } from './typings'
import { keys } from 'lodash'
import styles from './index.module.scss'

export default function ColorfulBadge(props: ColorfulBadgePropsType, { slots }: SetupContext) {
  const { class: className, value, enumKey, options } = props

  const iconType = (): string =>
    keys(options)?.find(
      (item: keyof ColorfulBadgePropsType['options']) => options!?.[item] === enumKey
    ) || 'default'

  return (
    <span class={className}>
      <i class={{ [styles['colorful-badge-icon']]: true, [styles[iconType()]]: true }} />
      <span>{value}</span>
      <span>{slots!?.default?.()}</span>
    </span>
  )
}
